import 'package:bxultimate/app/theme/app_theme.dart';
import 'package:bxultimate/app/theme/gaps.dart';
import 'package:bxultimate/domain/common/app_single_option.dart';
import 'package:bxultimate/widgets/app/app_title.dart';
import 'package:bxultimate/widgets/mk_page.dart';
import 'package:bxultimate/widgets/mk_scroll_view.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:tdesign_flutter/tdesign_flutter.dart';

import 'controller.dart';

class QuestionnaireDetailPage extends StatefulWidget {
  const QuestionnaireDetailPage({Key? key}) : super(key: key);

  @override
  State<QuestionnaireDetailPage> createState() =>
      _QuestionnaireDetailPageState();
}

class _QuestionnaireDetailPageState extends State<QuestionnaireDetailPage> {
  final controller = Get.find<QuestionnaireDetailController>();
  final state = Get.find<QuestionnaireDetailController>().state;

  @override
  Widget build(BuildContext context) {
    return GetBuilder(
        init: QuestionnaireDetailController(),
        builder: (_) {
          return MkPage(
            child: Scaffold(
              backgroundColor: Colors.transparent,
              appBar: TDNavBar(
                backgroundColor: Colors.transparent,
                title: "${state.dto.examTitle}",
              ),
              body: MkScrollView(
                bottomButton: TDButton(
                  isBlock: true,
                  theme: TDButtonTheme.primary,
                  text: state.dto.isFinish == null ? '':  state.dto.isFinish! ?'已完成问卷':'提交问卷',
                  disabled: state.dto.isFinish == null ||state.dto.isFinish!,
                  shape: TDButtonShape.circle,
                  height: 48,
                  onTap: controller.submit,
                ),
                children: [_buildBody()],
              ),
            ),
          );
        });
  }

  _buildBody() {
    return Container(
      height: Get.height - 200,
      padding: EdgeInsets.symmetric(horizontal: AppTheme.iDefaultPadding),
      child: state.dto.data == null
          ? SizedBox()
          : ListView.builder(
              itemBuilder: (BuildContext context, int index) {
                if (state.dto.data![index].titleType == 1) {
                  return _buildRadio(index);
                } else {
                  return _buildCheckBox(index);
                }
              },
              itemCount: state.dto.data!.length,
            ),
    );
  }

  _buildRadio(index) {
    var dataList = <AppSingleOption>[];
    for (var key in state.dto.data![index].answerToBeSelected!.keys) {
      dataList.add(AppSingleOption(
          value: key, label: state.dto.data![index].answerToBeSelected![key]));
    }

    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Gaps.vGap8,
        Text(
          '${state.dto.data![index].title}',
          style: TextStyle(fontSize: 16),
        ),
        Gaps.vGap8,
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: TDRadioGroup(
            selectId: state.dto.data![index].userAnswer,
            onRadioGroupChange: (value) {
              var data = state.dto.data;
              data![index] = data![index].copyWith(userAnswer: value);
              state.dto.copyWith(
                  data: data);
            },
            child: ListView.builder(
              padding: const EdgeInsets.all(0),
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (BuildContext context, int index) {
                return TDRadio(
                  enable: !state.dto.isFinish!,
                  id: dataList[index].value,
                  title: dataList[index].label,
                  titleMaxLine: 2,
                  subTitleMaxLine: 2,
                );
              },
              itemCount: dataList.length,
            ),
          ),
        ),
      ],
    );
  }

  _buildCheckBox(index) {
    var dataList = <AppSingleOption>[];
    for (var key in state.dto.data![index].answerToBeSelected!.keys) {
      dataList.add(AppSingleOption(
          value: key, label: state.dto.data![index].answerToBeSelected![key]));
    }
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Gaps.vGap8,
        Text(
          '${state.dto.data![index].title}',
          style: TextStyle(fontSize: 16),
        ),
        Gaps.vGap8,
        ClipRRect(
          borderRadius: BorderRadius.circular(8),
          child: TDCheckboxGroupContainer(
            selectIds: state.dto.data![index].userAnswer!.split('!@#'),
            onCheckBoxGroupChange: (value) {
              var data = state.dto.data;
              data![index] = data![index].copyWith(userAnswer: value.join('!@#'));
              state.dto.copyWith(
                  data: data);
            },
            child: ListView.builder(
              padding: const EdgeInsets.all(0),
              shrinkWrap: true,
              physics: const NeverScrollableScrollPhysics(),
              itemBuilder: (BuildContext context, int index) {
                return TDCheckbox(
                  enable: !state.dto.isFinish!,
                  id: dataList[index].value,
                  title: dataList[index].label,
                  titleMaxLine: 2,
                  subTitleMaxLine: 2,
                );
              },
              itemCount: dataList.length,
            ),
          ),
        )
      ],
    );
  }

  @override
  void dispose() {
    Get.delete<QuestionnaireDetailController>();
    super.dispose();
  }
}
